<!doctype html>
<html lang="zh" dir="ltr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="Content-Language" content="en"/>
    <meta name="msapplication-TileColor" content="#2d89ef">
    <meta name="theme-color" content="#4188c9">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico"/>
    <!-- Generated: 2018-04-06 16:27:42 +0200 -->
    <title>个人信息</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <!-- Dashboard Core -->
    <link href="./assets/css/dashboard.css" rel="stylesheet"/>
    <script src="./assets/js/dashboard.js"></script>
    <!-- c3.js Charts Plugin -->
    <link href="./assets/plugins/charts-c3/plugin.css" rel="stylesheet"/>
    <script src="./assets/plugins/charts-c3/plugin.js"></script>
    <!-- Google Maps Plugin -->
    <link href="./assets/plugins/maps-google/plugin.css" rel="stylesheet"/>
    <script src="./assets/plugins/maps-google/plugin.js"></script>
    <!-- Input Mask Plugin -->
    <script src="./assets/plugins/input-mask/plugin.js"></script>
</head>

<body class="">
<div class="page">
    <div class="page-main">

        <div class="header collapse d-lg-flex p-0" id="headerMenuCollapse">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-1 ml-auto">
                        <a href="login" class="btn btn-blue">退出</a>
                    </div>
                    <div class="col-lg order-lg-first">
                        <ul class="nav nav-tabs border-0 flex-column flex-lg-row">
                            <li class="nav-item">
                                <a href="./index" class="nav-link"><i class="fe fe-home"></i>首页</a>
                            </li>

                            <li class="nav-item">
                                <a href="./newslist" class="nav-link"><i class="fe fe-box"></i>
                                    教师资讯</a>
                            </li>
                            <li class="nav-item dropdown">
                                <a href="./courseList" class="nav-link "><i class="fe fe-calendar"></i>
                                    现有课程</a>

                            </li>
                            <li class="nav-item dropdown">
                                <a href="./addCourse" class="nav-link"><i
                                        class="fe fe-check-square"></i>新增课程</a>
                            </li>
                            <li class="nav-item dropdown">
                                <a href="./upCourse" class="nav-link"><i
                                        class="fe fe-check-square"></i>修改课程</a>
                            </li>
                            <li class="nav-item">
                                <a href="./user" class="nav-link   active"><i class="fe fe-image"></i>个人信息</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="my-3 my-md-5" id="app">
            <div class="container">
                <div class="row">
                    <div class="col-lg-4">
                        <div class="card card-profile">
                            <div class="card-header"></div>
                            <div class="card-body text-center">
                                <img class="card-profile-img"
                                     src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556987782083&di=34c7b295cdf7c84699e61f022983f282&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F17%2F08%2F27%2F90c40c58b0a39b3650c7c05420cbbb75.jpg%2521%2Ffwfh%2F804x557%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue">
                                <h3 class="mb-3" v-text="teacher.teacherName"></h3>
                            </div>
                        </div>

                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">密码修改</h3>
                            </div>
                            <div class="card-body">
                                <form onsubmit="return false" @submit.prevent="upPwd()">

                                    <div class="form-group">
                                        <label class="form-label">新的密码</label>
                                        <input class="form-control" type="password" v-model="pwd" required>
                                        <span></span>
                                    </div>
                                    <div class="form-group">
                                        <label class="form-label">重复密码</label>
                                        <input type="password" class="form-control" v-model="rePwd" required/>
                                    </div>
                                    <div class="form-footer">
                                        <button class="btn btn-primary btn-block">保存</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-8">

                        <form class="card" onsubmit="return false" @submit.prevent="upInfo()">
                            <div class="card-body">
                                <h3 class="card-title">修改个人信息</h3>
                                <div class="row">
                                    <div class="col-sm-6 col-md-3">
                                        <div class="form-group">
                                            <label class="form-label">名字</label>
                                            <input type="text" class="form-control" v-model="teacher.teacherName">
                                        </div>
                                    </div>
                                    <div class="col-sm-6 col-md-6">
                                        <div class="form-group">
                                            <label for="my-input">性别</label>
                                            <select id="my-input" class="form-control" v-model="teacher.teacherSex">
                                                <option>男</option>
                                                <option>女</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-sm-6 col-md-6">
                                        <div class="form-group">
                                            <label class="form-label">年龄</label>
                                            <input type="number" class="form-control" v-model="teacher.teacherAge">
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label class="form-label">毕业院校</label>
                                            <input type="text" class="form-control" v-model="teacher.teacherEdu">
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="card-footer text-right">
                                <button type="submit" class="btn btn-primary">保存更改</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <footer class="footer">
        <div class="container">
            <div class="row align-items-center flex-row-reverse">
                <div class="col-auto ml-lg-auto">
                    <div class="row align-items-center">
                        <div class="col-auto">
                            <ul class="list-inline list-inline-dots mb-0">
                                <li class="list-inline-item"><a href="#">教师系统</a></li>
                                <li class="list-inline-item"><a href="#">@2019</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>
</div>
</body>
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                teacher: null,
                rePwd: null,
                pwd: null
            }
        },
        created() {
            axios.get("/onlineTeacher/api/info").then(response => (this.teacher = response["data"]["data"]))
        },
        methods: {
            upPwd: function () {
                if (this.rePwd != this.pwd) {
                    alert("两次密码不一致");
                    return;
                }
                if (this.pwd.toString().length < 6) {
                    alert("密码小于六位数");
                    return;
                }
                axios.put("/onlineTeacher/api/upPwd", {
                    teacherPwd: this.pwd
                }).then(function (response) {
                    alert(response["data"]["msg"])
                })
            },
            upInfo: function () {
                axios.put("/onlineTeacher/api/upInfo",
                    this.teacher
                ).then(function (response) {
                    alert(response["data"]["msg"])
                })
            }

        }

    })


</script>

</html>